<!-- 集体学习页面 -->

<template>
	<focus-body mode="auto">
		<!-- =============================================== 实占层 -->
		<!-- 顶部自定义导航栏 -->
		<navigation-bar/>
		<!-- 创建学习组栏 -->
		<focus-box v-if="[3, 1, 2, -1,0].includes(state.controlNum) && group.list.length > 0"
		width="750" mode="col" justify="center" align="center">
			
			<!-- 按钮容器 -->
			<focus-box width="750" height="112" mode="row" justify="between" align="center"
			:padding="[0,32]" bg="white">
				<focus-box v-if="[ 1, 3].includes(state.controlNum)">
					{{endTime}}
				</focus-box>
				<focus-box v-if="state.controlNum == 0">
					权限已申请，正在审核中
				</focus-box>
				<!-- 查看申请详情按钮 -->
				<focus-box v-if="state.controlNum == 0" height="60" :padding="[0,26]"
				mode="row" justify="center" align="center"
				border="primary" radius="30" @click="detailsBtn">
					<!-- 添加图片 -->
					<image style="width:20rpx; height:20rpx; margin-right:7rpx;" src="@/pagesB/static/img/home/add_admin.png"></image>
					<!-- 按钮文字 -->
					<focus-text size="24" color="primary" text="查看详情"></focus-text>
				</focus-box>
				<focus-box v-if="state.controlNum == 2">
					权限已停用，请重新申请
				</focus-box>
				<focus-box v-if="state.controlNum == -1">
					权限已停用，请重新申请
				</focus-box>
				<focus-text v-if="showEnd" size="24" color="#FC0404" text="（已到期）"></focus-text>
				<!-- 创建按钮 -->
				
				<focus-box v-if="state.controlNum == 1" height="60" :padding="[0,26]"
				mode="row" justify="center" align="center"
				border="primary" radius="30" @click="creatBtnClick">
					<!-- 添加图片 -->
					<image style="width:20rpx; height:20rpx; margin-right:7rpx;" src="@/pagesB/static/img/home/add_admin.png"></image>
					<!-- 按钮文字 -->
					<focus-text size="24" color="primary" text="创建学习组"></focus-text>
				</focus-box>
				<focus-box v-if="state.controlNum == 3" height="60" :padding="[0,26]"
				mode="row" justify="center" align="center"
				border="primary" radius="30" @click="creatBtnClick">
					<!-- 添加图片 -->
					<image style="width:20rpx; height:20rpx; margin-right:7rpx;" src="@/pagesB/static/img/home/add_admin.png"></image>
					<!-- 按钮文字 -->
					<focus-text size="24" color="primary" text="创建学习组"></focus-text>
				</focus-box>
				
				<!-- 重新申请按钮 -->
				<focus-box v-if="[ 2, -1,].includes(state.controlNum)"  height="60" :padding="[0,26]"
				mode="row" justify="center" align="center"
				border="primary" radius="30" @click="createBtn">
					<!-- 添加图片 -->
					<image style="width:20rpx; height:20rpx; margin-right:7rpx;" src="@/pagesB/static/img/home/add_admin.png"></image>
					<!-- 按钮文字 -->
					<focus-text size="24" color="primary" text="申请权限"></focus-text>
				</focus-box>

			</focus-box>
			<!-- 间隔 -->
			<focus-box width="750" height="20"></focus-box>
		</focus-box>
		
		<!-- 无列表数据提示 -->
		<block v-if="state.isReqGroup==true && group.list.length <= 0">
			<!-- 全屏容器 -->
			<div style='display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 100rpx;'>
				<!-- 无数据图片 -->
				<image style="width:443rpx; height:280rpx;" src="@/pagesB/static/img/collective/nothave.png"></image>
				<!-- 文字与图片的间隔 -->
				<focus-box width="100" height="55"></focus-box>
				<!-- 提示文字 -->
				<focus-text size="28" color="info" text="暂无学习组"></focus-text>
				<!-- 创建学习组权限 -->
				<focus-box class="createBtn" @click="createBtn" v-if="state.controlNum == -1 && state.isShowCreat==false">
					<focus-text size="30" color="#FFFFFF" text="申请创建学习组权限"></focus-text>
				</focus-box>
				
				<!-- 创建学习组 -->
				<focus-box class="createBtn" @click="creatBtnClick" v-if="state.controlNum == 1">
					<focus-text size="30" color="#FFFFFF" text="创建学习组"></focus-text>
				</focus-box>
				
				<!-- 审批中 -->
				<focus-box class="progress" v-if="state.controlNum === 0">
					<focus-box>创建学习组权限已申请，正在审批中...</focus-box>
					<focus-box class="progressBtn" @click="detailsBtn">查看申请详情</focus-box>
				</focus-box>
				
				<focus-box class="progress" v-if="state.controlNum == 2">
					<focus-box>创建学习组权限审批未通过，</focus-box>
					<focus-box style="margin-top:20rpx">原因为：{{reason}}</focus-box>
					<focus-box class="reapply" @click="createBtn">重新申请</focus-box>
				</focus-box>
				
			</div>
			<!-- <focus-box width="750" mode="col" justify="center" align="center"
			position="absolute" left="0" :top="(sys.height_rpx / 2.5)">
				
			</focus-box> -->
		</block>
		
		<!-- 学习组item对象列表 -->
		<focus-box v-else width="750" mode="col" justify="start" align="center">
			<!-- 循环学习组数组 -->
			<block v-for="(item) in group.list" :key="item.key">
				
				<!-- 学习组item 组件 -->
				<group-item
					:groupid="item.groupId"
					:name="item.name"
					:state="item.state"
					:is_check="item.is_check"
					:people="item.people"
					:time="item.time"
					:isallow="item.isAllow"
					@closestudy="groupCompEndStudy"
				></group-item>
				
			</block>
		</focus-box>
		<!-- 学习组权限申请按钮 -->
		<focus-box class="createBtn" @click="createBtn" v-if="state.controlNum == 1 && state.isShowCreat==false">
			<focus-text size="30" color="#FFFFFF" text="申请创建学习组权限"></focus-text>
		</focus-box>
		<!-- 申请创建学习组弹窗-->
		<focus-box>
			<view>
				<u-popup
					:show="show"
					mode="center"
					:customStyle="{ width: '600rpx', 'padding-top': '50rpx' }"
					:round="20"
					:closeable="true"
					closeIconPos="top-right"
					@close="closeShow">
					<view class="popupTitle">申请创建学习组权限</view>
					<view class="downRegion">
						<view class="clickDownload">
							<view>1、下载申请模板</view>
							<view class="downloadStyle" @click="clickDownload">点击下载</view>
						</view>
						<view class="clickDownload">
							<view>2、上传申请表</view>
							<view class="downloadStyle" @click="clickUpload">上传文件</view>
						</view>
					</view>
				</u-popup>
			</view>
		</focus-box>
		<!-- =============================================== 悬浮层 -->
		<!-- 全屏拖动客服按钮 -->
		<customer-service navbar="false"></customer-service>
		
		
	</focus-body>
</template>

<script>
	// 接口文件引入
	import request from '../../common/js/request/learning.js';
	
	// 组件引入
	import navigationBar from './element/navigation-bar/navigation-bar.vue'; // 自定义导航栏
	import groupItem from './element/group-item/group-item.vue'; // 学习组item组件
	
	export default {
		
		// 组件定义
		components: {
			navigationBar,
			groupItem,
		},
		
		// 页面数据
		data() {
			return {
				// 系统信息
				sys: {},
				// 状态信息
				state: {
					isShowCreat: false, // 是否显示创建按钮
					isReqGroup: false, // 是否请求过学习组的列表
					controlNum: NaN,	//申请权限判断
				},
				//审核不通过text
				reason: '',
				imageUrl: '',
				// 学习组数据
				group: {
					// 列表数组
					list: [],
				},
				//创建学习组权限弹窗
				show: false,

				//下载模板地址
				downloadUrl: '',
				//权限结束时间
				endTime: '',
				//
				showEnd: false,
				//是否创建过学习组
				studyList: false,
			}
		},
		
		// 页面显示
		onShow() {
			this.$forceUpdate();
			// 该用户是否允许创建学习组
			this.allowForCreatReq();
			// 已加入学习组的列表
			this.learnGroupListReq();
		},
		
		// 初次显示页面
		onReady() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			// ========================================= 元素事件
			// 添加学习组按钮 点击
			creatBtnClick() {
				// 跳转到创建页面
				uni.navigateTo({
					url:'/pagesB/pages/learning/creat/index'
				})
			},
			// 申请创建学习组权限按钮 点击
			createBtn(val) {
				this.show = !this.show
			},
			//查看详情页
			detailsBtn() {
				uni.navigateTo({
					url:'/pagesB/pages/colletiveStudy/speedLook/index'
				})
			},

			// 点击下载分享模板
			    clickDownload() {
      this.templateDownloadReq();
      if (this.downloadUrl) {
        uni.showLoading({
          title: "正在下载中...",
        })
        uni.downloadFile({
          url: encodeURI('https://jjboss.oss-cn-hangzhou.aliyuncs.com/static/集体开班申请书.docx'),
          success(res) {
            wx.shareFileMessage({
              filePath: res.tempFilePath,
              success(res) { },
            });
          },
          complete() {
            uni.hideLoading();
            console.log("分享成功");
          },
        });
      }
    },
			//点击上传文件
			clickUpload() {
			wx.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success (res) {
					// tempFilePath可以作为img标签的src属性显示图片
					const tempFilePaths = res.tempFilePaths
					uni.$focus.pageJump('/pagesB/pages/colletiveStudy/applyDetails/index', {
					imageUrl: tempFilePaths[0],
				});
				},
				fail: console.error,
				complete(res) {
					// console.log('图片选择完成',res);
				}
			})
			this.show = false
			},
			// 学习组组件 结束学习了 回调
			groupCompEndStudy() {
				// 该用户是否允许创建学习组
				this.allowForCreatReq();
				// 已加入学习组的列表
				this.learnGroupListReq();
			},
			
			// ========================================= 接口请求
			// 该用户是否允许创建学习组
			allowForCreatReq() {
				request.allowForCreat({
					fail: () => {
						// 不显示创建按钮栏
						this.state.isShowCreat = false;
						this.state.controlNum = ''
					},
					success: (res) => {
						// 有权限的话，显示创建按钮栏 this.
						this.endTime =  '权限截止：' + res.info.end_time
						let nowTime = parseInt(new Date().getTime());
						let endTimes = new Date(this.endTime)
						if (endTimes <= nowTime) { this.showEnd = true }
						if (res.isAllow == true) { this.state.isShowCreat = true; }
						else { this.state.isShowCreat = false; }
							this.state.controlNum = res.btn_status
							this.reason = res.info.reason
						// 否则不显示
						// else { this.state.isShowCreat = false; }
					},
				});
			},
			
			// 已加入学习组的列表
			learnGroupListReq() {
				request.learnGroupList({
					success: (res) => {
						if (res.list.length >= 1) {
							this.studyList = true
						}
						// 学习组列表 赋值
						this.group.list = res.list;
						// 标记为"已经请求过学习组的列表"
						this.state.isReqGroup = true;
					},
				});
			},
			
			//下载申请表模板
			templateDownloadReq() {
				request.templateDownload({
					success: (res) => {
						this.downloadUrl = res.url
					},
				});
			},
			closeShow() {
				this.show = false;
			}
		}
	}
</script>
<style>
	.createBtn{
		width: 350rpx;
		height: 80rpx;
		background: #4A87FD;
		border-radius: 40rpx;
		font-weight: 500;
		margin-top: 60rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.popupTitle{
		/* margin-top: 30rpx; */
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #000000;
	}
	.clickDownload{
		margin-top: 40rpx;
		text-align: center;
		font-size: 34rpx;
	}
	.downloadStyle{
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #4A87FD;
	}
	.downRegion{
		padding-bottom: 60rpx;
	}
	.progress{
		margin-top: 30rpx;
		font-size: 30rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
	}
	.progressBtn{
		margin-top: 30rpx;
		color: #4A87FD;
	}
	.reapply{
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 20rpx;
		border: 2rpx solid #ccc;
		border-radius: 40rpx;
	}
</style>